<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show1 = !show1">fade淡入淡出</fu-button>
        <fu-transition :show="show1">
          <view class="transition-box"></view>
        </fu-transition>
      </view>
    </view>
    
    <!-- 上下左右淡入 -->
    <view class="demo-block">
      <view class="demo-block__title">上下左右淡入</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show2 = !show2" class="button-item">上方淡入</fu-button>
        <fu-button type="primary" @click="show3 = !show3" class="button-item">下方淡入</fu-button>
        <fu-button type="primary" @click="show4 = !show4" class="button-item">左侧淡入</fu-button>
        <fu-button type="primary" @click="show5 = !show5" class="button-item">右侧淡入</fu-button>
        
        <fu-transition name="fade-down" :show="show2">
          <view class="transition-box"></view>
        </fu-transition>
        
        <fu-transition name="fade-up" :show="show3">
          <view class="transition-box"></view>
        </fu-transition>
        
        <fu-transition name="fade-left" :show="show4">
          <view class="transition-box"></view>
        </fu-transition>
        
        <fu-transition name="fade-right" :show="show5">
          <view class="transition-box"></view>
        </fu-transition>
      </view>
    </view>
    
    <!-- 滑动动画 -->
    <view class="demo-block">
      <view class="demo-block__title">滑动动画</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show6 = !show6" class="button-item">上滑进入</fu-button>
        <fu-button type="primary" @click="show7 = !show7" class="button-item">下滑进入</fu-button>
        <fu-button type="primary" @click="show8 = !show8" class="button-item">左滑进入</fu-button>
        <fu-button type="primary" @click="show9 = !show9" class="button-item">右滑进入</fu-button>
        
        <fu-transition name="slide-up" :show="show6">
          <view class="transition-box"></view>
        </fu-transition>
        
        <fu-transition name="slide-down" :show="show7">
          <view class="transition-box"></view>
        </fu-transition>
        
        <fu-transition name="slide-left" :show="show8">
          <view class="transition-box"></view>
        </fu-transition>
        
        <fu-transition name="slide-right" :show="show9">
          <view class="transition-box"></view>
        </fu-transition>
      </view>
    </view>
    
    <!-- 缩放动画 -->
    <view class="demo-block">
      <view class="demo-block__title">缩放动画</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show10 = !show10">缩放</fu-button>
        <fu-transition name="zoom" :show="show10">
          <view class="transition-box"></view>
        </fu-transition>
      </view>
    </view>
    
    <!-- 自定义动画时长 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义动画时长</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show11 = !show11">动画时长1000ms</fu-button>
        <fu-transition name="fade" :duration="1000" :show="show11">
          <view class="transition-box"></view>
        </fu-transition>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false,
      show9: false,
      show10: false,
      show11: false
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    padding: 30rpx;
    position: relative;
  }
}

.button-item {
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-right: 0;
  }
}

.transition-box {
  width: 100rpx;
  height: 100rpx;
  margin-top: 20rpx;
  background-color: var(--fu-primary-color);
  border-radius: var(--fu-radius-base);
}
</style> 